<!DOCTYPE html>
 <html class="no-js"> 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript" src="skinnytip.js"></script>
		<style>
			span {
				border-bottom: 1px dotted #999;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<h1>SkinnyTip JavaScript Tooltip Library Sample Code</h1>

		Please refer to the <a href="http://www.ebrueggeman.com/skinnytip">project page</a> 
		or <a href="https://github.com/elliottb/skinnytip"> SkinnyTip GitHub</a> page for 
		more information.

		<h4>Basic Usage</h4>
		<ul>
			<li>
				<span class="skinnytip" data-text="This is the contents of the tooltip">
					Span that triggers a tooltip
				</span>
			</li>

			<li>
				<a href="http://www.ebrueggeman.com/skinnytip" class="skinnytip" 
				data-text="This is also the contents of the tooltip">
					Link that triggers a tooltip
				</a>
			</li>

			<li>
				<span class="skinnytip" data-text="This is the contents of the tooltip" 
				data-title="This is the title of the tooltip">
					Span that triggers a tooltip with a title and text
				</span>
			</li>	
		</ul>

		<h4>Advanced Usage</h4>
		<ul>
			<li>
				<span class="skinnytip" data-text="This is the contents of the tooltip" 
				data-options="borderColor: #333, backColor: #333, width: 150px, 
				textPadding: 10px, textColor: #FFF">
					Span that triggers a tooltip with a title and text and some options set
				</span>
			</li>
			
			<li>
				<span class="skinnytip" data-text="This is the contents of the tooltip. This 
				is the contents of the tooltip. This is the contents of the tooltip" 
				data-title="Observations" data-options="borderColor: #3F3, backColor: #EFE">
					Another span that triggers a tooltip with a title and text and some options set
				</span>
			</li>
			
			<li>
				The kitchen sink example: 
				<span class="skinnytip" data-text="This is the contents of the tooltip" 
				data-title="This is the title!" data-options="width: 200px, border: 1px, 
				borderColor: #000, backColor: #EEE, textColor: #00F, titleTextColor: #FFF, 
				fontFace: verdana, fontSize: 12px, titleFontSize: 15px, titlePadding: 10px, 
				textPadding: 10px, xOffset: 30, yOffset: 30">
					a span that triggers a tooltip with a title and text and many options set
				</span>
			</li>
		</ul>

		<script type="text/javascript">SkinnyTip.init();</script>
	</body>
</html>
